<template>
	<view class="my">
		<scroll-view scroll-y="true" >
			<!-- 头部头像名称 -->
			<view class="my-header">
				<view class="">
					  <image class="headerbottomimg"
						:src="userInfo.provider === 'tel' || userInfo.provider === 'email'? `${baseurl}/${userInfo.imgUrl}` : `${userInfo.imgUrl}`"
						mode="aspectFill"></image>
					<transition
						  appear
						  name="animate__animated animate__bounce"
						  enter-active-class = "animate__zoomIn"
						  leave-active-class = "animate__fadeOutDown"
					  >
					  <view class="headerbottommork"></view>	
					  </transition>
					
						
					
				</view>
				<view class="header-main">
					<view class="header-logo"  @tap="goConfig">
						<view class="logo-imgs">
							<transition
								  appear
							      name="animate__animated animate__bounce"
							      enter-active-class = "animate__zoomIns"
							      leave-active-class = "animate__fadeOutDown"
							  >
							  <image class="logo-img"
							  	:src="userInfo.provider === 'tel' || userInfo.provider === 'email'? `${baseurl}/${userInfo.imgUrl}` : `${userInfo.imgUrl}`"
							  	mode=""></image>
							  </transition>
						</view>
			
						<view class="logo-text" >
							{{ userInfo.nickname }}
						</view>
			
					</view>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="order">
				<view class="order-title">
					<view class="orderis">
						我的订单
					</view>
					<view class="orderall">
						<view class="orderare" @tap="goOrder">
							全部订单
						</view>
						<view class="orderimg">
							<image class="img" src="../../static/tabBar/right.png" mode=""></image>
						</view>
					</view>
			
				</view>
				
			</view>
				
			<!-- 我的内容列表 -->
			<view class="my-content">
				<transition-group
					appear
					name="animate__animated animate__bounce"
					enter-active-class = "animate__fadeInRight"
					leave-active-class = "animate__fadeOutDown"
				>
				<view class="my-content-list" v-for="(item,index) in listtop" :key="item.mypagesid" @click="golistdata(item.mypagesid)">
					
					<view class="my-content-item">
						<view class="content">
							<view class="imgall">
								<image class="img" :src="item.imgurl" mode=""></image>
							</view>
							<view class="text">
								{{item.title}}
							</view>
						</view>
						<view style="color:#d7d7d7;font-size: 28rpx;" v-if="item.mypagesid===1">
							{{leavetime}}
						</view>
						<view class="imgs">
							<image class="img" :src="item.imgicon" mode=""></image>
						</view>
					</view>
					<mylines></mylines>
					
						
					
				</view>
				
				</transition-group>
				
				
					 
				
			</view>
			
		</scroll-view>
		<tarbar currentPage="my"></tarbar>
	</view>
</template>

<script>
	import mylines from '@/components/common/Lines.vue'
	import {mapState} from 'vuex'
	import tarbar from '@/common/tabbar.vue'
	import $http from '@/common/api/request.js'
	import 'animate.css';
	export default {
		data() {
			return {
				baseurl:"https://zyc618.mynatapp.cc",
				tea_id:0,
				listtop:[],
				ismember:0,
				leavetime:"",
				userid:0
			};
		},
		computed:{
			...mapState({
				loginStatus:state=>state.user.loginStatus,
				userInfo:state=>state.user.userInfo
			})
		},
		components:{
			mylines,tarbar
		},
		methods:{
			//获取的orderid日期加上一个月:
			addoonemonth(dateString){
				    // 解析日期字符串
				    const year = parseInt(dateString.slice(0, 4), 10);
				    const month = parseInt(dateString.slice(4, 6), 10) - 1; // 月份是从 0 到 11
				    const day = parseInt(dateString.slice(6, 8), 10);
				    const hours = parseInt(dateString.slice(8, 10), 10);
				    const minutes = parseInt(dateString.slice(10, 12), 10);
				    const seconds = parseInt(dateString.slice(12, 14), 10);
				
				    // 创建 Date 对象
				    const originalDate = new Date(year, month, day, hours, minutes, seconds);

				  // 获取下个月的日期
				     const newDate = new Date(originalDate);
				     newDate.setMonth(originalDate.getMonth() + 1);
					
				     // 处理月份溢出导致的年份变化
				     if (newDate.getMonth() !== (originalDate.getMonth() + 1) % 12) {
				         // 如果月份溢出，年份增加
				         newDate.setFullYear(originalDate.getFullYear() + 1);
				     }
				 
				     // 获取新日期的年、月、日、时、分、秒
				     const newYear = newDate.getFullYear();
				     const newMonth = ('0' + (newDate.getMonth() + 1)).slice(-2);
				     const newDay = ('0' + newDate.getDate()).slice(-2);
				     const newHours = ('0' + newDate.getHours()).slice(-2);
				     const newMinutes = ('0' + newDate.getMinutes()).slice(-2);
				     const newSeconds = ('0' + newDate.getSeconds()).slice(-2);
				 
				     // 构建新的日期字符串
				     const newDateString = newYear + newMonth + newDay + newHours + newMinutes + newSeconds;
				 
				     return newDateString;
			},
			compontenttime(nowtime){
				// 两个日期字符串，格式为 "YYYYMMDDHHmmss"
				const dateString1 = nowtime;
				const dateString2 = this.geettime();
				
				// 提取年、月、日、时、分、秒
				const year1 = parseInt(dateString1.slice(0, 4), 10);
				const month1 = parseInt(dateString1.slice(4, 6), 10) - 1; // 月份是从 0 到 11
				const day1 = parseInt(dateString1.slice(6, 8), 10);
				const hours1 = parseInt(dateString1.slice(8, 10), 10);
				const minutes1 = parseInt(dateString1.slice(10, 12), 10);
				const seconds1 = parseInt(dateString1.slice(12, 14), 10);
				
				const year2 = parseInt(dateString2.slice(0, 4), 10);
				const month2 = parseInt(dateString2.slice(4, 6), 10) - 1;
				const day2 = parseInt(dateString2.slice(6, 8), 10);
				const hours2 = parseInt(dateString2.slice(8, 10), 10);
				const minutes2 = parseInt(dateString2.slice(10, 12), 10);
				const seconds2 = parseInt(dateString2.slice(12, 14), 10);
				
				// 创建 Date 对象
				const date1 = new Date(year1, month1, day1, hours1, minutes1, seconds1);
				const date2 = new Date(year2, month2, day2, hours2, minutes2, seconds2);
				
				// 计算两个日期之间的毫秒差异
				const timeDifference =   date1.getTime()- date2.getTime() ;
				
				// 将毫秒差异转换为天数
				const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
				if(daysDifference < 0 ){
					this.leavetime = '距离会员到期'+ daysDifference + " 天"
					uni.showTabBar({
						title:"会员已经过期",
						mask:true,
						duration:2000
					})
				}else{
					this.leavetime = '距离会员到期'+ daysDifference + " 天"
				}
				
			},
			//获取当前时间:
			geettime(){
				const now = new Date();
				const year = now.getFullYear();
				const month = ('0' + (now.getMonth() + 1)).slice(-2);
				const day = ('0' + now.getDate()).slice(-2);
				const hours = ('0' + now.getHours()).slice(-2);
				const minutes = ('0' + now.getMinutes()).slice(-2);
				const seconds = ('0' + now.getSeconds()).slice(-2);
				const formattedTime = year + month + day + hours + minutes + seconds;
				return formattedTime
			},
			//获取是否有会员:
			getismember(){
				$http.request({
					url:"/getismember",
					method:"POST",
					header:{
						token:true
					},
				}).then((res)=>{
					if(res.code === 200 ){
						this.userid = res.userid;//获取用户id
						this.leavetime = res.message.leavtime;
						this.compontenttime(this.addoonemonth(this.leavetime)  )
					}
					
				}).catch(()=>{
					uni.showToast({
						title: "无会员,推荐充值",
						icon:"none",
						mask: true,
						duration: 2500
					})
				})
			},
			//获取listtop:
			getmypageslist(){
				$http.request({
					url:"/getmypageslist"
				}).then((res)=>{
					
					this.listtop = res.listtop.map(item=>{
						item.imgurl =`${this.baseurl}${item.img}`
						item.imgicon = `${this.baseurl}${item.iconimg}`
						return item
					})
					
				}).catch(()=>{
					uni.showToast({
						title: "获取列表失败..",
						icon: "error",
						mask: true,
						duration: 2000
					})
				})
			},
			//我的设置跳转:
			goConfig(){
				this.navigateTo({
					url:'../my-config/my-config'
				})
			},
			//查询家庭指导师编号:
			select_teacher(){
				$http.request({
					url:"/save/findteach",
					method:"POST",
					header:{
						token:true
					},
				}).then((res)=>{
					
					if(res.code == 204){
						this.tea_id = res.tea_id;
					}
				})
			},
			//我的订单跳转
			goOrder(){
				uni.navigateTo({
						url:'../my-order/my-order'
				})
			},
			
			//我的列表跳转判定
			golistdata(index){
				
				if(index === 4){
					//反馈
					this.navigateTo({
						url:"/pages/feedback/feedback"
					})
				}else if(index === 1 ){//会员 
						this.navigateTo({
							url:"/pages/member/member"
						})
					
				}else if(index == 2){
					if(this.tea_id == 0){
						uni.showToast({
							icon:"none",
							title:"无预约家庭指导师"
						})
					}else{
						this.navigateTo({
							url:`/pages/tutordetail/tutordetail?tea_id=${this.tea_id}`
						})
					}
					
				}else if(index === 3){
					if(this.tea_id == 0){
						uni.showToast({
							icon:"none",
							title:"无预约家庭指导师"
						})
					}else{
						this.navigateTo({
							url:`/pages/VIPcustom/VIPcustom?teacherid=${this.tea_id}`
						})
					}
					
				}else if(index == 5){
					if(this.tea_id == 0){
						uni.showToast({
							icon:"none",
							title:"无预约家庭指导师`无法进入里程碑"
						})
					}else{
						this.navigateTo({
							url:`/pages/milestone/milestone?teacherid=${this.tea_id}`
						})
					}
					
				}
			}
		},
		onReady() {
			this.getismember()
		},
		onLoad() {
			this.getmypageslist();this.select_teacher()
			
		}
	}
</script>

<style lang="scss">
	.my {
		padding-bottom: 120rpx;
		background-color: #f0f0f0;
		.my-header {
			position: relative;
			height:480rpx;
			width: 100%;
			.headerbottomimg{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				filter: blur(3px);
			}
			.headerbottommork{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(255, 255, 255, .7);
				
				z-index: 2;
			}
			.header-main {
			
				.header-logo {
					position: absolute;
					z-index: 999;
					left:50% ;
					top: 50%;
					transform: translateX(-50%) translateY(-50%);
					.logo-imgs {
						display: flex;
						justify-content: center;
						
						.logo-img {
							overflow: hidden;
							width: 200rpx;
							height: 200rpx;
							border: 2rpx solid #ebebeb;
							border-radius: 150rpx;
		
						}
					}
		
					.logo-text {
						display: flex;
						justify-content: center;
						padding: 10rpx;
					}
				}
			}
		
		}

		.order {
			.order-title {
				display: flex;
				padding: 20rpx;
				background-color: #ffffff;
				justify-content: space-between;
				margin: 10rpx 0;
				.orderis {
					font-size: 32rpx;
					font-weight: 800;
				}

				.orderall {
					display: flex;

					.orderare {
						font-size: 30rpx;
						color: #aeaeae;
					}

					.orderimg {
						padding: 5rpx 0;
						.img {
							width: 30rpx;
							height: 30rpx;
						}
						
					}
				}

			}
			.order-list{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #ffffff;
				padding: 20rpx;
				.order-item{
					
					.orderall{
						.itemimg{
							width: 60rpx;
							height: 60rpx;
							display: flex;
							margin: 0 auto;
						}
						.itemtext{
							margin-top: 10rpx;
							font-size: 28rpx;
							
						}
					}
				}
			}
			margin-bottom: 30rpx;
		}
		.my-content{
			.my-content-list{
				.my-content-item{
					display: flex;
					justify-content: space-between;
					padding:0 10rpx;
					margin:20rpx 0;
					.content{
						display: flex;
						.imgall{
							padding: 10rpx;
							.img{
								width: 30rpx;
								height: 30rpx;
							}
							margin-right: 15rpx;
						}
						.text{
							font-size: 32rpx;
							line-height: 56rpx;
						}
					}
					.imgs{
						padding: 10rpx;
						.img{
							width: 30rpx;
							height: 30rpx;
						}
						
					}
				}
			}
		}
	}
</style>